/**
 * __test__ Navigation
 * https://reactnavigation.org/docs/zh-Hans/getting-started.html
 *
 * @format
 * @flow
 */

import React from 'react';
import {Image} from 'react-native';
import {createStackNavigator, createBottomTabNavigator} from 'react-navigation';

import HomeScreen from './pages/home/HomeScreen';
import CustomNavScreen from './pages/home/CustomNavScreen';
import DetailScreen from './pages/home/DetailScreen';
import StorageScreen from './pages/home/StorageScreen';

import MineScreen from './pages/mine/MineScreen';
import MineDetailScreen from './pages/mine/MineDetailScreen';
import ScrollScreen from './pages/mine/ScrollScreen';

const TabNavigator = createBottomTabNavigator(
  {
    HomeScreen: HomeScreen,
    MineScreen: MineScreen,
  }, {
    navigationOptions: ({navigation}) => {

      const {routeName} = navigation.state;

      let title, icon;
      if (routeName === 'HomeScreen') {
        title = '首页';
        icon = require('./images/ic_home.png');
      } else if (routeName === 'MineScreen') {
        title = '我的';
        icon = require('./images/ic_me.png');
      }

      return {
        tabBarLabel: title,
        tabBarIcon: ({tintColor}) => {
          return <Image source={icon} style={[{width: 24, height: 24}, {tintColor: tintColor}]}/>
        },
        tabBarOnPress: ({defaultHandler}) => {
          defaultHandler();
        }
      }
    },
    tabBarOptions: {  // https://reactnavigation.org/docs/zh-Hans/bottom-tab-navigator.html
      activeTintColor: 'red',       // -活动选项卡的标签和图标颜色。
      inactiveTintColor: 'gray',    // -"非活动" 选项卡的标签和图标颜色。
      showIcon: true,               // - 是否显示 Tab 的图标，默认为true。
      showLabel: true,              // -是否显示选项卡的标签, 默认值为 true。
      labelStyle: {
        fontSize: 10,
      },
      style: {
        backgroundColor: 'white',
      }
    },
  }
);

TabNavigator.navigationOptions = ({navigation}) => {
  let index = navigation.state.index;
  if (index === 0) {
    return {title: '首页'}
  } else if (index === 1) {
    return {title: '我的', header: null}  // header: null 即可隐藏nav
  }

};

const TabBarStack = createStackNavigator(
  {
    Tabs: TabNavigator,
    DetailScreen: DetailScreen,
    CustomNavScreen: CustomNavScreen,
    StorageScreen: StorageScreen,

    MineDetailScreen: MineDetailScreen,
    ScrollScreen: ScrollScreen,
  }, {
    initialRouteName: 'Tabs',
    navigationOptions: ({navigation}) => ({
      headerTintColor: 'red',
      headerBackTitle: null,
      headerBackImage: ({tintColor}) => (
        <Image
          source={require("./images/ic_me.png")}
          style={[{marginLeft: 15, height: 24, width: 24}, {tintColor: tintColor}]}
        />
      ),
    }),
  }
);

export default TabBarStack;